<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点击地图拾取坐标</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script src="__PUBLIC__/admin/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/admin/js/plugins/layer/layer.min.js"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
    p{
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }
    #info{
        position: absolute;
        left: 20px;
        top: 20px;
        font-size: 14px;
        background: #FFF;
        padding: 10px;
        border-radius: 20px;
        z-index: 1001;
    }
    .infop{
        line-height: 40px;
    }
    .infop-input{
        height:40px;
        line-height: 40px;
        width:200px;
        border:none;
    }
    .infop-input-button{
        height:40px;
        line-height: 40px;
        border:none;
        width:100px;
        background: #0d8ddb;
        color:#FFFFFF;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
    }
</style>

<body onload="initMap()">
<div id="container"></div>
<div id="info">
    <p class="infop">
        当前的坐标位置：<input class="infop-input" id="position" disabled="disabled"></input>
        <button class="infop-input-button" onclick="chooseMap()">确定</button>
    </p>
</div>


<script>
    function chooseMap(){
        var position_point = $('#position').val();
        if(position_point == ''){
            layer.msg("请单击屏幕获取经纬度");
            return 0;
        }
        
        var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
        console.log(index);
        parent.$('input[name=latlon]').val(position_point);
        parent.layer.close(index);//关闭窗口  
    }
    
    function initMap() {
        var parent_position = parent.$('input[name=latlon]').val();
        if(parent_position == ''){
            $("#position").val("39.984104,116.307503");
            var position_arr = [39.984104,116.307503];
        }else{
            $("#position").val(parent_position);
            var position_arr =  parent_position.split(',');
        }
        
        var position = document.getElementById("position");

        var center = new TMap.LatLng(position_arr[0],position_arr[1]);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map("container", {
            center: center
        });

        //绑定点击事件
        map.on("click",function(evt){
            var lat = evt.latLng.getLat().toFixed(6);
            var lng = evt.latLng.getLng().toFixed(6);
            //position.innerHTML = lat + "," + lng;
            var position_point =lat + "," + lng;
            $("#position").val(position_point);
        })
    }
</script>
</body>

</html>